<template>
  <div>
    <div class="scroll-wrapper">
      <Alldatas ref="diagnosisReport"
                class="diagnosis-report"
                :left-id="leftId"
                :right-id="rightId"/>
    </div>
    <!-- 父组件按钮 -->
    <button @click="saveAsPDF" class="btn-save">保存</button>
    <button @click="goBack" class="btn-back">返回</button>
  </div>
</template>

<script>
import {onMounted, ref} from "vue";

import html2pdf from "html2pdf.js";
import Alldatas from "/@/views/system/MCC/preview/component/alldata.vue";
import { nextTick } from "vue";
import {useRouter,useRoute} from "vue-router";
export default {
  name: "pdf",
  components: {
    Alldatas,
  },
  setup() {
    const diagnosisReport = ref(null);
    const router=useRouter();
    const isSaving = ref(false); // 是否正在保存
    const route = useRoute();
    const leftId = route.query.leftId; // 通过 query 获取参数
    const rightId = route.query.rightId; // 从 query 获取
    // 返回按钮事件
    const goBack = () => {
      router.go('-1')
    };
    // 保存PDF按钮事件
    const saveAsPDF = async () => {
      try {
        // 1. 确保数据加载完成
        await diagnosisReport.value.loadData()
        await diagnosisReport.value.chartToImage()
        // 增加渲染等待时间
        await new Promise(resolve => setTimeout(resolve, 1500))
        // 克隆处理后的节点
        // 移除动画效果
        await nextTick()

        // 2. 克隆节点并修改样式
        const content = diagnosisReport.value.$el.cloneNode(true)
        content.querySelectorAll('*').forEach(el => {
          el.style.transition = 'none !important'
          el.style.animation = 'none !important'
        })


        // 3. 确保图片加载完成
        const images = content.querySelectorAll('img')
        await Promise.all(Array.from(images).map(img => {
          return new Promise((resolve) => {
            if (img.complete) return resolve()
            img.onload = resolve
            img.onerror = resolve
          })
        }))

        // 4. 创建临时容器
        const container = document.createElement('div')
        Object.assign(container.style, {
          position: 'fixed',
          left: '0',
          top: '0',
          width: '210mm',
          visibility: 'hidden'
        })
        container.appendChild(content)
        document.body.appendChild(container)

        // 5. 调整html2canvas配置
        const options = {
          filename: '诊疗报告.pdf',
          html2canvas: {
            scale: 2,
            useCORS: true,
            scrollY: 0,
            windowHeight: content.scrollHeight,
            height: content.scrollHeight
          },
          pagebreak: { mode: ['css'] }
        }

        // 6. 生成PDF
        await html2pdf().set(options).from(content).save()

        // 7. 清理临时元素
        document.body.removeChild(container)
      } catch (error) {
        console.error('生成失败:', error)
        ElMessage.error('导出失败')
      }
    }


    return {
      goBack,
      saveAsPDF,
      diagnosisReport,
      leftId,
      rightId,
    };
  },
};
</script>

<style scoped>
.diagnosis-report {
  /* 移除max-height和overflow */
  width: 210mm; /* 保持A4标准宽度 */
  min-height: 297mm; /* A4标准高度 */
  margin: 0 auto;
  page-break-inside: avoid
}
.parent-container {
  position: relative;
  height: 100vh;
}

.scroll-wrapper {
  height: calc(100vh - 80px); /* 可视区域高度 */
  overflow-y: auto; /* 启用滚动 */
  padding: 20px;
}

/* 保持按钮固定定位 */
.btn-save, .btn-back {
  position: fixed;
  bottom: 20px;
  z-index: 1000;
}
button {
  position: fixed;
  width: 10%;
  height: 40px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 16px;
  border-radius: 25px;
  bottom: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 立体感 */
  transition: all 0.3s ease; /* 动画效果 */
}

.btn-back {
  left: 60%;
  background-color: #fff;
  color: #007bff;
  border: 2px solid #007bff; /* 白底蓝边 */
}

.btn-save {
  left: 30%;
  background-color: #007bff;
  color: white;
}

button:hover {
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); /* 增强立体感 */
}

button:active {
  transform: scale(0.98); /* 点击按钮时稍微缩小，增强交互感 */
}
</style>
